<template>
  <div class="details_box">
    <NavBar :title="details.goodsName" :isLeftBtn="false" />
    <Swiper :swiperList="swiperList" />
    <div class="details_title">
      <div class="title">{{ details.goodsName }}</div>
      <div class="title">{{ details.goodsIntro }}</div>
      <div class="details_desc">免运费 顺丰包邮哦</div>
      <div class="details_pic">
        <span class="selling_pic"> ￥{{ details.sellingPrice }} </span>
        <span class="original_pic"> ￥{{ details.originalPrice }} </span>
      </div>
      <div v-html="details.goodsDetailContent" class="img_width"></div>
    </div>
    <ActionBar :goodsId="details.goodsId" />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import NavBar from "@/components/NavBar.vue";
import Swiper from "@/components/Swiper.vue";
import ActionBar from "./components/ActionBar.vue";
import { getDetail } from "@/utils/apis/good";
import { Details } from "@/utils/types/goods";
export default defineComponent({
  name: "GoodsDetails",
  components: { NavBar, Swiper, ActionBar },
  setup() {
    const route = useRoute();
    interface Swipers {
      carouselUrl: string;
    }
    const state = reactive({
      details: {
        goodsCarouselList: [],
        goodsCoverImg: "",
        goodsDetailContent: "",
        goodsIntro: "",
        goodsCogoodsNameerImg: "",
        tag: "",
        originalPrice: 0,
        sellingPrice: 0,
        goodsId: -1,
      } as Details,
      swiperList: [] as Array<Swipers>,
    });

    const { id } = route.query;
    onMounted(async () => {
      const res = await getDetail(id);
      res.data.goodsCarouselList.forEach((item: string) => {
        if (item.startsWith("http://localhost:28089/")) {
          item = item.replace(
            "http://localhost:28089/",
            "http://47.99.134.126:28019/"
          );
        }
        state.swiperList.push({
          carouselUrl: item,
        });
      });
      state.details = res.data;
    });

    return { ...toRefs(state) };
  },
});
</script>
<style lang="scss">
.img_width img {
  width: 100%;
}
.details_title {
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 50px;
  .title {
    font-size: 15px;
    color: #333;
  }
  .details_desc {
    color: #999;
    margin: 12px 0;
  }
  .details_pic {
    .selling_pic {
      font-weight: bold;
      font-size: 20px;
      color: #f63515;
      margin-right: 4px;
    }
    .original_pic {
      text-decoration: line-through;
      font-size: 14px;
      color: #999;
    }
  }
}
</style>
